import { useContext, useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { useTranslation } from 'react-i18next';
import QRCode from 'react-qr-code';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import Select from 'src/component/Select';
import SelectOption from 'src/component/SelectOption';
import { Ui } from 'src/constant/Env';
import { Page } from 'src/constant/Page';
import { ThemeContext } from 'src/context/ThemeContext';
// import useQuery from 'src/hook/useQuery';
// import { Address } from 'src/model/Deposit';
import { RootState } from 'src/redux/store';
import { openSnackbar } from 'src/redux/uiSlice';
import { getMyRechargeAddres } from 'src/service/moneyService';
import style from './Deposit.module.scss';

type Query = { coinId?: string; network?: string };

type Address = any

const Deposit = () => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const { IcCopy, IcRecord } = useContext(ThemeContext).image;
    const navigate = useNavigate();
    // const query = useQuery<Query>();
    const [address, setAddress] = useState<Address>();
    const [selectCoin, setSelectCoin] = useState<string>();
    const [selectNetwork, setSelectNetwork] = useState<string>();
    const { crypto } = useSelector((rootState: RootState) => rootState.coin);
    const { accountInfo } = useSelector((rootState: RootState) => rootState.auth);
    const token = localStorage.getItem("token")
    const onCopy = () => {
        dispatch(openSnackbar({ message: "复制成功" }));
    };

    useEffect(() => {
        if (!accountInfo?.FID) return;
        getMyRechargeAddres({
            FUserID: accountInfo?.FID,
            token: token
        }).then((res) => {
            setAddress(res.message)
        }).catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    }, [accountInfo]);

    // const onCoinChange = (coin: string) => {
    //     setSelectCoin(coin);
    //     if (coin === 'usdt') setSelectNetwork('trc20');
    //     else setSelectNetwork(undefined);
    // };

    // const onNetworkChange = (network: string) => {
    //     setSelectNetwork(network);
    // };

    // const coin = crypto.find((item) => item.id === selectCoin);

    // useEffect(() => {
    //     if (crypto.length === 0) return;

    //     let currentCoin = 'usdt';
    //     if (query.coinId && crypto.map((v) => v.id).includes(query.coinId.toLowerCase())) {
    //         setSelectCoin(query.coinId.toLowerCase());
    //         currentCoin = query.coinId.toLowerCase();
    //     } else setSelectCoin('usdt');

    //     const currentCrypto = crypto.find((v) => v.id === currentCoin);
    //     if (currentCrypto?.networks.length === 1 && currentCrypto.networks[0].network === '')
    //         setSelectNetwork(undefined);
    //     else if (
    //         query.network &&
    //         currentCrypto?.networks.map((v) => v.network).includes(query.network.toLowerCase())
    //     )
    //         setSelectNetwork(query.network.toLowerCase());
    //     else setSelectNetwork('trc20');
    // }, [crypto, query]);

    return (
        <div>
            <BackButton />
            <div className={style.headingBlock}>
                <div className={style.heading}>充值</div>
                <Button
                    appearance="text"
                    className={style.recordButton}
                    onClick={() => navigate(Page.Record)}
                >
                    <img src={IcRecord} />
                    充值与提领纪录
                </Button>
            </div>
            <div className={style.content}>
                {/* <Select
                        label={t('deposit.desc.coin')}
                        defaultValue={selectCoin.toLowerCase()}
                        onChange={onCoinChange}
                        asterisked
                    >
                        {crypto.map((value) => (
                            <SelectOption key={value.id} value={value.id}>
                                {value.id.toUpperCase()}
                            </SelectOption>
                        ))}
                    </Select> */}
                <Select
                    label="币别"
                    defaultValue="USDT"
                    // onChange={onCoinChange}
                    asterisked
                >
                    <SelectOption value="USDT">
                        USDT
                    </SelectOption>
                </Select>
                {/* {selectNetwork && (
                        <div className={style.networkSelect}>
                            <Select
                                label={t('deposit.desc.selectNetwork')}
                                defaultValue={selectNetwork.toLowerCase()}
                                onChange={onNetworkChange}
                                asterisked
                            >
                                {coin?.networks.map((value) => (
                                    <SelectOption key={value.network} value={value.network}>
                                        {value.network.toUpperCase()}
                                    </SelectOption>
                                ))}
                            </Select>
                        </div>
                    )} */}

                <div className={style.networkSelect}>
                    <Select
                        label="选择网路"
                        defaultValue="TRC20"
                        // onChange={onNetworkChange}
                        asterisked
                    >
                        {/* <SelectOption value="ERC20">
                            ERC20
                        </SelectOption> */}
                        <SelectOption value="TRC20">
                            TRC20
                        </SelectOption>
                    </Select>
                </div>
                <div className={style.qrcode}>
                    {address && <QRCode value={address} size={180} />}
                </div>
                <div className={style.addressBlock}>
                    {address ?? ''}
                    <CopyToClipboard onCopy={onCopy} text={address ?? ''}>
                        <img src={IcCopy} />
                    </CopyToClipboard>
                </div>
                <div className={style.noticeBlock}>
                    <ul>
                        <li className={style.noticeItems}>
                            请勿向上述地址充值任何非 USDT 资产，否则资产将不可找回。
                        </li>
                        <li className={style.noticeItems}>
                            您充值至上述地址后，需整个网路节点的确认，到帐时间一般为 10 分钟 - 30 分钟。
                        </li>
                        <li className={style.noticeItems}>
                            最小充值金额：0.001 USDT，小于最小金额的充值将不会上帐。您的充值地址不会经常改变，可以重复充值，如有更改，我们会尽量通过网站公告或 Email 通知您。请确认自己的装置与浏览器的安全性，同时确认资料未遭到窜改或外泄。
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default Deposit;
